<template>
	<div class='wy-main car-info'>
		<a-form :form="form" @submit="handleSubmit" class="wy-form">
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车牌号">
				<a-input v-decorator="[ 'licence ', {rules: [{ required: true, message: '请输入车牌号!' }]}]" placeholder='请选择' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆类型">
				<a-select  v-decorator="[ 'type ', {rules: [{ required: true, message: '请选择车辆类型!' }]} ]" placeholder="请选择车辆类型">
					<a-select-option value="0">
						面包车
					</a-select-option>
					<a-select-option value="1">
						平板车
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车长">
				<a-input style="width: 70%;" v-decorator="[ 'length ', {rules: [{ required: true, message: '请输入车长!' }]}]" placeholder='请输入车长' />
				<b style="margin-left: 20px;">（米）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="载重">
				<a-input style="width: 70%;" v-decorator="[ 'weight ', {rules: [{ required: true, message: '请输入载重!' }]}]" placeholder='请输入载重' />
				<b style="margin-left: 20px;">（吨）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="体积">
				<a-input style="width: 70%;" v-decorator="[ 'volume ']" placeholder='请输入体积' />
				<b style="margin-left: 10px;">（立方米）</b>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="车辆常住地">
				<a-input v-decorator="[ 'residence ', {rules: [{ required: true, message: '请选择车辆常住地!' }]}]" placeholder='请选择车辆常住地' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="驾驶员">
				<a-select  style="width: 280px;" v-decorator="[ 'driverId', {rules: [{ required: true, message: '请选择驾驶员!' }]} ]" placeholder="请选择驾驶员">
					<a-select-option value="1">
						张三
					</a-select-option>
					<a-select-option value="2">
						李四
					</a-select-option>
				</a-select>
				<a-button type="primary" style="margin-left: 20px;">新增驾驶员</a-button>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员联系电话">
				<a-input  v-decorator="[ 'mobile', {rules: [{ required: true, message: '请输入驾驶员联系电话!' }]}]" placeholder='请输入驾驶员联系电话' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="车辆认证" class="upzjimg">
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="vehicle_Change">
					<div class="img_zz" v-if="vehicle_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								<span style="color: red;">*必填：</span>车辆照片
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="vehicle_img" :src="vehicle_img" alt="avatar" />
					<div class="up_img_d" v-if="!vehicle_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							<span style="color: red;">*必填：</span>车辆照片
						</div>
					</div>
				</a-upload>
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="travel_Change">
					<div class="img_zz" v-if="travel_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								<span style="color: red;">*必填：</span>行驶证照片 
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="travel_img" :src="travel_img" alt="avatar" />
					<div class="up_img_d" v-if="!travel_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							<span style="color: red;">*必填：</span>行驶证照片 
						</div>
					</div>
				</a-upload>
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Operate_Change">
					<div class="img_zz" v-if="Operate_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 道路运输证（营运证）  
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Operate_img" :src="Operate_img" alt="avatar" />
					<div class="up_img_d" v-if="!Operate_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							道路运输证（营运证）
						</div>
					</div>
				</a-upload>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-checkbox v-model="agreement">
								我已阅读并接受<a href="javascript:;" @click="userShow=true">《云南国际物流云用户协议》</a><a href="javascript:;" @click="webShow=true">《用户信息发布协议》</a>
							</a-checkbox>
						</span>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary" :disabled = '!agreement' html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								保存
							</a-button>
						</span>
					</div>
				</div>
			</div>
		</a-form>
		<a-modal  :visible="webShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<web @close="close" v-if="webShow" @cancel="close"></web>
		</a-modal>
		<a-modal  :visible="userShow" @cancel="close" width="900px"  :maskClosable='false' :footer="null">
			<user @close="close" v-if="userShow" @cancel="close"></user>
		</a-modal>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import Web from '@/components/tool/web'
	import User from '@/components/tool/user'
	export default {
		components: {
			Web,
			User
		},
		data() {
			return {
				webShow:false,
				userShow:false,
				agreement:true,
				
				uploadUrl: 'http://10.23.118.71:9527/api/fileupload/upload',// 图片上传地址
				vehicle_img:'', // 车辆照片
				travel_img:'',  // 行驶证照片
				Operate_img:'', // 运营证照片
				
				certificatesPics :'',// 运营证
				certificatesPicsPath :'',// 运营证目录
				drivingLicense :'',// 行驶证
				drivingLicensePath :'',//  行驶证目录
				vehiclePics :'',// 车辆
				vehiclePicsPath :'',// 车辆照片目录
				loading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 关闭协议弹窗
			close(){
			    this.webShow=false;
				this.userShow=false;
			},
			// 上传车辆照片
			vehicle_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.vehicle_img = info.file.response.data.certifJpgFile
					this.vehiclePics = info.file.response.data.certificatesjpg// 车辆
					this.vehiclePicsPath = info.file.response.data.certificatesPath// 车辆照片目录
					this.loading = false
				}
			},
			// 上传行驶证照片
			travel_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.travel_img = info.file.response.data.certifJpgFile
					this.drivingLicense = info.file.response.data.certificatesjpg// 行驶证
					this.drivingLicensePath = info.file.response.data.certificatesPath//  行驶证目录
					this.loading = false
				}
			},
			// 上传运营证照片
			Operate_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Operate_img = info.file.response.data.certifJpgFile
					this.certificatesPics = info.file.response.data.certificatesjpg// 运营证
					this.certificatesPicsPath = info.file.response.data.certificatesPath// 运营证目录
					this.loading = false
				}
			},
			beforeUpload(file) {
				console.log(file.type)
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(info) {
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					// Get this url from response in real world.
					getBase64(info.file.originFileObj, (imageUrl) => {
						this.imageUrl = imageUrl
						this.loading = false
					})
				}
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						values.userId = this.user.userId
						values.certificatesPics = this.certificatesPics// 运营证
						values.certificatesPicsPath = this.certificatesPicsPath// 运营证目录
						values.drivingLicense = this.drivingLicense// 行驶证
						values.drivingLicensePath = this.drivingLicensePath//  行驶证目录
						values.vehiclePics = this.vehiclePics// 车辆
						values.vehiclePicsPath = this.vehiclePicsPath// 车辆照片目录
						console.log('Received values of form: ', values);
						this.$post('info/infoVehicle', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
			callback(key) {
				console.log(key)
			}
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less" scoped>
	.car-info {
		.upzjimg{
			.up_img{
				float: left;
				position: relative;
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding-top: 55px; 
				}
				.img_zz{
					width: 200px;
					height: 200px; 
					position: absolute; 
					color: #fff;
					border: 1px solid;
					.img_zz_text{
						width: 100%;
						text-align: center;
						position: absolute;
						z-index: 10;
						padding-top: 55px; 
					}
					.img_zz_d{
						position: absolute;
						width: 200px ;
						height:200px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>